<template>
  <button ref="btnRef" @click="clickBtn" class="u-button">
    <span>
      <slot></slot>
    </span>
  </button>
</template>

<script setup lang="ts">
interface btnProps {
  type:
    | "default"
    | "primary"
    | "success"
    | "warning"
    | "info"
    | "danger"
    /**
     * @deprecated
     * Text type will be deprecated in the next major version (3.0.0)
     */
    | "text"
    | "";
}
const props = defineProps<btnProps>();
const btnRef = ref();
const clickBtn = (e: MouseEvent) => {
  const rippleBall = document.createElement("span");
  const pointX = btnRef.value.getBoundingClientRect().x;
  const pointY = btnRef.value.getBoundingClientRect().y;
  const x = e.clientX - pointX - 10;
  const y = e.clientY - pointY - 10;
  rippleBall.style.left = x + "px";
  rippleBall.style.top = y + "px";
  rippleBall.classList.add("ripple-ball");

  btnRef.value.appendChild(rippleBall);
  rippleBall.addEventListener("animationend", () => {
    btnRef.value.removeChild(rippleBall);
  });
};
</script>

<style lang="scss">
.u-button {
  padding: 12px 20px;
  outline: none;
  border: none;
  overflow: hidden;
  position: relative;
  border-radius: 5px;
  box-shadow:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
.u-button:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.u-button .ripple-ball {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  animation: ripple 1s;
}
/* 小球动画 */
@keyframes ripple {
  0% {
    transform: scale(2);
  }
  /* 波纹扩张 */
  85% {
    transform: scale(25);
  }
  100% {
    opacity: 0;
  }
}
</style>
